/*
 * 一级分类
 * @Author: along
 * @Date: 2019-12-09 10:24:00
 */
<template>
    <div class="container workCategory">
        <!-- header -->
        <div class="headerBox">
            <div class="header-left">
                <div class="header-box">
                    <p class="header-box-title">类目组筛选:</p>
                    <el-select
                        v-model="header.category"
                        filterable
                        placeholder="请选择"
                        size="small"
                        clearable
                        @change="getTableData()"
                    >
                        <el-option
                            v-for="item in categoryList"
                            :key="item.cate_no"
                            :label="item.title"
                            :value="item.cate_no"
                        />
                    </el-select>
                </div>
                <div class="header-box">
                    <p class="header-box-title">一级分类名称:</p>
                    <el-input
                        v-model="header.class"
                        placeholder="请输入一级分类名称"
                        suffix-icon="el-icon-search"
                        size="small"
                        clearable
                        @change="getTableData(1)"
                        @keyup.native.enter="getTableData(1)"
                    />
                </div>
            </div>
            <div class="header-right">
                <el-button
                    type="primary"
                    size="small"
                    @click="fnAddCategory()"
                >添加分类</el-button>
            </div>
        </div>
        <!-- /header -->

        <!-- table -->
        <el-table
            :data="tableData"
            height="100%"
            style="width: 100%;"
            border
            ref="workCategory"
            @sort-change="handleSortChanged"
            @select="fnSelect"
            @select-all="fnSelectAllTop"
            @selection-change="handleSelectionChange"
        >
            <el-table-column
                type="selection"
                width="40"
                fixed="left"
            />
            <el-table-column
                type="index"
                width="80"
                label="序号"
            />
            <el-table-column
                prop="type_name"
                label="一级分类名称"
                show-overflow-tooltip
                :formatter="emptyFormatter"
            />
            <el-table-column
                prop="cate_name_str"
                label="所属类目组"
                show-overflow-tooltip
                :formatter="emptyFormatter"
            />
            <el-table-column
                prop="sub_type_count"
                label="下属二级分类"
                show-overflow-tooltip
                sortable
                :width="130"
            >
                <template slot-scope="scope">
                    <span
                        @click="fnGoSubTypeCount(scope.row)"
                        class="cursor-font"
                    >{{ scope.row.sub_type_count }}</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="type_sort"
                label="排序"
                sortable
            >
                <template slot-scope="scope">
                    <div class="sort-wrap">
                        {{ scope.row.type_sort }}
                        <span class="sort-spliter" />
                        <el-button
                            type="text"
                            class="btn-sort"
                            @click="fnEditSort(scope.row)"
                        >
                            <i class="el-icon-edit" />
                        </el-button>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                prop="course_num"
                label="视频数量"
                show-overflow-tooltip
                sortable
            >
                <template slot-scope="scope">
                    <span
                        @click="fnGoVideo(scope.row)"
                        class="cursor-font"
                    >{{ scope.row.course_num }}</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="type_status"
                label="状态"
                show-overflow-tooltip
                :formatter="emptyFormatter"
            >
                <template slot-scope="scope">
                    <span v-if="scope.row.type_status == 1">已启用</span>
                    <span v-else-if="scope.row.type_status == 0">已隐藏</span>
                    <span v-else>--</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="create_time"
                label="创建时间"
                :formatter="emptyFormatter"
                :width="150"
            >
                <template slot-scope="scope">
                    <span v-if="scope.row.create_time">{{ scope.row.create_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm') }}</span>
                    <span v-else>--</span>
                </template>
            </el-table-column>
            <el-table-column
                label="操作"
                fixed="right"
                :width="220"
            >
                <template slot-scope="scope">
                    <div style="display:flex;">
                        <el-button
                            type="text"
                            :disabled="scope.row.is_recommend == 1"
                            @click="fnPushHomePage(scope.row)">推荐到首页</el-button>
                        <el-button
                            type="text"
                            @click="fnEditClassify(scope.row)">编辑</el-button>
                        <el-button
                            type="text"
                            @click="fnChangeClassifyStatus(scope.row)">
                            <span v-if="scope.row.type_status == 0">启用</span>
                            <span v-if="scope.row.type_status == 1">隐藏</span>
                        </el-button>
                        <el-button
                            type="text"
                            style="margin-left:10px;"
                            @click="fnDelMaterial(scope.row)">
                            删除
                        </el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <!-- /table -->

        <!-- 添加分类 -->
        <el-dialog
            title="分类"
            :visible.sync="dialogVisible"
            width="530px"
            :close-on-click-modal="false"
        >
            <el-form
                :model="ruleForm"
                :rules="rules"
                ref="ruleForm"
                label-width="100px"
                class="demo-ruleForm"
            >
                <el-form-item
                    label="分类名称"
                    prop="name"
                >
                    <el-input
                        v-model="ruleForm.name"
                        size="small"
                        placeholder="请输入分类名称"
                    />
                </el-form-item>
                <el-form-item
                    label="副标题"
                >
                    <el-input
                        v-model="ruleForm.title"
                        size="small"
                        maxlength="12"
                        placeholder="请输入副标题,最多不超过12个字"
                    />
                    <p style="fontSize:13px">*当该一级被推荐到首页时，会展示该副标题（最多可输入12个字）</p>
                    <!-- <el-popover
                        placement="bottom-start"
                        width="280"
                        trigger="hover"
                        content="">
                        <el-button
                            slot="reference"
                            type="text"
                        >
                            <span
                                class="iconfont el-icon-hand-ziyuan"
                                :style="{'color': '#606266'}"
                            />
                        </el-button>
                    </el-popover> -->
                </el-form-item>
                <el-form-item
                    label="背景图片"
                    prop="url"
                >
                    <el-upload
                        :show-file-list="false"
                        :http-request="e=> {fnUploadImageOfGoods(e)}"
                        accept="image/*"
                        class="upload-good-image"
                        action="https://jsonplaceholder.typicode.com/posts/">
                        <img
                            v-if="ruleForm.url"
                            :src="ruleForm.url"
                            class="avatar"
                        >
                        <p
                            class="upload-hide"
                            v-else
                        >
                            <i class="el-icon-plus"/>
                        </p>
                    </el-upload>
                    <p style="fontSize:13px">*此处的图片将会展示在“发现”中，以及该类目的页面</p>
                </el-form-item>
            </el-form>
            <span
                slot="footer"
                class="dialog-footer"
            >
                <el-button
                    size="small"
                    @click="dialogVisible = false"
                >取 消</el-button>
                <el-button
                    type="primary"
                    size="small"
                    @click="submitForm('ruleForm')">确 定</el-button>
            </span>
        </el-dialog>
        <!-- /添加分类 -->

        <!-- 推入分组页 -->
        <el-dialog
            title="推入分组"
            :visible.sync="dialogVisibleCategory"
            width="510px"
            :close-on-click-modal="false"
        >
            <el-checkbox-group
                v-model="checkList"
            >
                <el-checkbox
                    class="check-bottom"
                    v-for="(item,index) in categoryList"
                    :label="item.cate_no"
                    :key="index"
                >{{ item.title }}</el-checkbox>
            </el-checkbox-group>
            <span
                slot="footer"
                class="dialog-footer">
                <el-button
                    @click="dialogVisibleCategory = false"
                    size="small"
                >取 消</el-button>
                <el-button
                    type="primary"
                    size="small"
                    @click="fnConfrimCategory()">确 定</el-button>
            </span>
        </el-dialog>
        <!-- /推入分组页 -->

        <!-- 推荐到首页 -->
        <el-dialog
            title="推荐到首页"
            :visible.sync="dialogVisibleHome"
            width="510px"
            :close-on-click-modal="false"
        >
            <div style="display:flex">
                <p style="marginRight: 15px">展示样式</p>
                <el-radio
                    v-model="category_style"
                    label="1">竖版</el-radio>
                <el-radio
                    v-model="category_style"
                    label="2">横滑</el-radio>
            </div>
            <img
                src="http://cdn.zsdx.cn/wei/images/hire/home/cate_s.png"
                class="categort_transverse"
                v-if="category_style == '1' "
            >
            <img
                src="http://cdn.zsdx.cn/wei/images/hire/home/cate_h.png"
                class="categort_vertical"
                v-if="category_style == '2' "
            >
            <span
                slot="footer"
                class="dialog-footer">
                <el-button
                    @click="dialogVisibleHome = false"
                    size="small"
                >取 消</el-button>
                <el-button
                    type="primary"
                    size="small"
                    @click="fnConfirmHome()">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 推荐到首页 -->

        <!-- /分页 -->
        <div class="pagination-wrapper clearfix">
            <el-checkbox
                v-model="checkedAll"
                :indeterminate="checkIndeterminate"
                @change="fnChangeChecked"
            >全选</el-checkbox>
            <el-button
                type="text"
                @click="fnPushCategory()"
                :disabled="multipleSelection.length == 0 ? true : false"
            >推入类目组</el-button>
            <!-- <el-pagination
                background
                layout="total, prev, pager, next"
                :current-page.sync="page.now_page"
                :total="page.total_count"
                :page-size="page.page_size"
                @current-change="getTableData"
            /> -->
        </div>
    </div>
</template>

<script>
export default {
    /**
     * @param  {Object}    authResult               //表单权限
     * @param  {Array}     tableData                //表单数据
     * @param  {Object}    page                     //表单分页
     * @param  {Object}    header                   //表单检索字段
     * @param  {Object}    filterData               //排序
     * @param  {Array}     categoryList             //金刚区筛选数据
     * @param  {Boolean}   checkedAll               //是否全选
     * @param  {Boolean}   multipleSelection        //选择数据
     * @param  {Boolean}   checkIndeterminate       //选中状态
     * @param  {Boolean}   dialogVisible            //弹窗开关
     * @param  {Object}    ruleForm                 //弹窗字段
     * @param  {Object}    rules                    //弹窗字段验证规则
     * @param  {String}    type_popup               //用于判断弹窗打开类型——添加/编辑
     * @param  {Boolean}   dialogVisibleCategory    //推入分组弹窗开关
     * @param  {Array}     checkList                //选择分组数据
     * @param  {String}    category_style           //推荐样式
     * @param  {Boolean}   dialogVisibleHome        //推荐首页弹窗开关
     * @param  {String}    pathName                 //上一页路由name
     * @param  {String}    type_no                  //课程编号,用于编辑/推入首页
     */
    data () {
        return {
            type_no: '',
            pathName: '',
            dialogVisibleHome: false,
            category_style: '1',
            checkList: [],
            dialogVisibleCategory: false,
            type_popup: '',
            rules: {
                name: [
                    {required: true, message: '请填写分类名称,不可以为空', trigger: 'blur'}
                ],
                url: [
                    {required: true, message: '请上传背景图片,不可以为空', trigger: 'blur'}
                ]
            },
            ruleForm: {
                name: '',
                title: '',
                url: ''
            },
            dialogVisible: false,
            checkIndeterminate: false,
            multipleSelection: [],
            checkedAll: false,
            categoryList: [],
            header: {
                category: '',
                class: ''
            },
            filterData: {
                sort_field: 0,
                sort_type: 0
            },
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            },
            tableData: [],
            authResult: {}
        };
    },
    filters: {},
    computed: {},
    watch: {
        dialogVisible (val) {
            if (!val) {
                this.ruleForm.title = '';
                this.$refs['ruleForm'].resetFields();
            }
        },
        dialogVisibleCategory (val) {
            if (!val) {
                this.checkList = [];
            }
        },
        dialogVisibleHome (val) {
            if (!val) {
                this.category_style = '1';
            }
        }
    },
    beforeRouteEnter(to, from, next) {
        next(vm => {
            vm.pathName = from.name;
        });
    },
    mounted () {
        this.authResult = this.$route.meta.authResult;
        this.fnBreadcrumb();
        this.fnRecord();
        this.getTableData();
        this.getCategortList();
    },
    destroyed(){
        window.removeEventListener('popstate', this.fnGoBack, false);
    },
    methods: {
        /**
         * 设置表单header
         */
        fnBreadcrumb () {
            this.$store.commit('SET_HEADER', [{ title: "APP后台"},{title: '学习'},{title: "一级类目"}]);
        },

        /**
         * 获取表格数据
         */
        getTableData (page) {
            this.$post('/student/course_type%5Cget_list', {
                cate_no: this.header.category,
                keyword: this.header.class
            }, resp => {
                if (resp.code == 1) {
                    this.tableData = resp.data.list;
                }
            });
        },

        /**
         * 记录上一页路由,监听页面返回并重定向
         */
        fnRecord () {
            if (window.history && window.history.pushState) {
                history.pushState(null, null, document.URL);
                window.addEventListener('popstate', this.fnGoBack, false);
            }
        },

        /**
         * 上一页重定向
         */
        fnGoBack  () {
            this.$router.replace({ name: this.pathName });
        },

        /**
         * 获取筛选数据
         */
        getCategortList () {
            this.$post('/student/course_cate%5Cget_simple_list', {}, resp => {
                if (resp.code == 1) {
                    this.categoryList = resp.data.list;
                }
            });
        },

        /**
         * 上传图片
         */
        fnUploadImageOfGoods(e) {
            this.fnUploadImage(e, (resp) => {
                this.ruleForm.url = resp.data.url;
            }, (resp) => {
                console.log(resp.msg);
            });
        },
        fnUploadImage(e, success, error) {
            let timeTmp = new Date().getTime();
            let pic = new FormData();

            pic.append('file', e.file);
            this.$upload({
                url: '/__local/common%5Cupload',
                data: pic,
                success: resp => {
                    if (resp.code == 1) {
                        success(resp);
                    } else {
                        this.$message({
                            type: 'warning',
                            message: '上传图片失败',
                            center: true
                        });
                        error(resp);
                    }
                }
            });
        },

        /**
         * 添加分类
         */
        fnAddCategory () {
            this.type_popup = 'addCategory';
            this.dialogVisible = !this.dialogVisible;
        },

        /**
         * 编辑分类
         */
        fnEditClassify (row) {
            this.type_popup = 'editCategory';
            this.type_no = row.type_no;
            this.$post('/student/course_type%5Cget', {
                type_no: row.type_no
            }, resp => {
                if (resp.code == 1) {
                    this.ruleForm = {
                        name: resp.data.type_name,
                        title: resp.data.type_info,
                        url: resp.data.type_image
                    };
                    this.dialogVisible = !this.dialogVisible;
                }else{
                    this.$message({
                        type: 'warning',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 弹窗确定按钮
         */
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (this.type_popup == 'addCategory') {
                        this.$post('/student/course_type%5Csave',{
                            type_no: '',
                            type_name: this.ruleForm.name,
                            type_info: this.ruleForm.title,
                            type_image: this.ruleForm.url
                        },resp=>{
                            if (resp.code == 1) {
                                this.getTableData();
                                this.dialogVisible = !this.dialogVisible;
                                this.$message({
                                    type: 'success',
                                    message: '添加成功',
                                    center: true
                                });
                            } else {
                                this.$message({
                                    type: 'waring',
                                    message: resp.msg,
                                    center: true
                                });
                            }
                        });
                    } else if (this.type_popup == 'editCategory') {
                        this.$post('/student/course_type%5Csave',{
                            type_no: this.type_no,
                            type_name: this.ruleForm.name,
                            type_info: this.ruleForm.title,
                            type_image: this.ruleForm.url
                        },resp=>{
                            if (resp.code == 1) {
                                this.getTableData();
                                this.dialogVisible = !this.dialogVisible;
                                this.$message({
                                    type: 'success',
                                    message: '编辑成功',
                                    center: true
                                });
                            } else {
                                this.$message({
                                    type: 'waring',
                                    message: resp.msg,
                                    center: true
                                });
                            }
                        });
                    } else {
                        return;
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },

        /**
         * 设置状态/启用/禁用
         */
        fnChangeClassifyStatus (row) {
            // if (Number(row.course_num) == 0 && Number(row.type_status) == 0) {
            //     this.$message({
            //         type: 'waring',
            //         message: '一级类目之下有视频才可启动',
            //         center: true
            //     });
            //     return;
            // }
            this.$post('/student/course_type%5Cmodify',{
                type_no: row.type_no,
                type_status: row.type_status == 1 ? 0 : 1
            },resp=>{
                if (resp.code == 1) {
                    this.getTableData();
                    this.$message({
                        type: 'success',
                        message: '操作成功',
                        center: true
                    });
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 删除
         */
        fnDelMaterial (row) {
            this.$confirm('删除将不可恢复, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$post('/student/course_type%5Cdelete', {
                    type_no: row.type_no
                }, resp => {
                    if (resp.code == 1) {
                        this.getTableData();
                        this.$message({
                            type: 'success',
                            message: '删除成功',
                            center: true
                        });
                    } else {
                        this.$message({
                            type: 'waring',
                            message: resp.msg,
                            center: true
                        });
                    }
                });
            });
        },

        /**
         * 排序
         */
        fnEditSort(row) {
            this.$prompt('修改排序', '', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /^(0|\+?[1-9][0-9]*)$/,
                inputPlaceholder: '请输入序号',
                inputErrorMessage: '请输入正整数',
                closeOnClickModal: false,
            }).then(({ value }) => {
                this.$post('/student/course_type%5Cmodify', {
                    type_no: row.type_no,
                    type_sort: value
                }, resp => {
                    if (resp.code == 1) {
                        this.getTableData();
                        this.$message({
                            type: 'success',
                            message: '修改成功',
                            center: true
                        });
                    } else {
                        this.$message({
                            type: 'waring',
                            message: resp.msg,
                            center: true
                        });
                    }
                });
            });
        },

        /**
         * 跳转二级类目
         */
        fnGoSubTypeCount (row) {
            this.$router.replace({
                name: 'workClassTo',
                query: {
                    type_no: row.type_no
                }
            });
        },

        /**
         * 跳转视频列表
         */
        fnGoVideo (row) {
            this.$router.replace({
                name: 'StudyList',
                query: {
                    type_no: row.type_no
                }
            });
        },

        /**
         * 推入分组页
         */
        fnPushCategory () {
            this.dialogVisibleCategory = !this.dialogVisibleCategory;
        },

        /**
         * 确定推入分组页
         */
        fnConfrimCategory () {
            console.log(this.multipleSelection, this.checkList, 'data');

            this.multipleSelection.map(item=>{
                this.checkList.map(option=>{
                    this.$post('/student/course_cate%5Cset_link', {
                        cate_no: option,
                        aim_type: 1,
                        aim_no: item.type_no
                    }, resp => {
                        if (resp.code == 1) {
                            //
                        } else {
                            this.$message({
                                type: 'waring',
                                message: resp.msg,
                                center: true
                            });
                        }
                    });

                });
            });
            this.dialogVisibleCategory = !this.dialogVisibleCategory;
            this.$message({
                type: 'success',
                message: '操作成功',
                center: true
            });
        },

        /**
         * 推荐到首页
         */
        fnPushHomePage (row) {
            this.type_no = row.type_no;
            this.dialogVisibleHome = !this.dialogVisibleHome;
        },

        /**
         * 确定推荐到首页
         */
        fnConfirmHome () {
            this.$post('/student/course_recommend%5Cjoin', {
                type_no: this.type_no,
                show_style: this.category_style
            }, resp => {
                if (resp.code == 1) {
                    this.getTableData();
                    this.dialogVisibleHome = !this.dialogVisibleHome;
                    this.$message({
                        type: 'success',
                        message: '操作成功',
                        center: true
                    });
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 选择Checkbox
         */
        fnSelect(selection) {
            if(selection.length == this.tableData.length) {
                this.checkedAll = true;
            }else{
                this.checkedAll = false;
            }
            if(selection.length > 0 && selection.length < this.tableData.length) {
                this.checkIndeterminate = true;
            }else{
                this.checkIndeterminate = false;
            }
        },
        fnSelectAllTop(selection) {
            if(selection.length > 0) {
                this.checkedAll = true;
            }else{
                this.checkedAll = false;
            }
            if(selection.length > 0 && selection.length < this.tableData.length) {
                this.checkIndeterminate = true;
            }else{
                this.checkIndeterminate = false;
            }
        },
        fnChangeChecked() {
            if(this.checkedAll){
                this.toggleSelection(1);
            }else{
                this.toggleSelection();
            }
        },
        toggleSelection(rows) {
            if (rows) {
                this.$refs.workCategory.toggleAllSelection();
            } else {
                this.$refs.workCategory.clearSelection();
            }
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },

        /**
         * 排序
         */
        handleSortChanged(data) {
            let sortTypeMap = {
                ascending: 'asc',
                descending: 'desc'
            };

            let sortFieldMap = {
                sub_type_count: 'sub_type_count',
                type_sort: 'type_sort',
                course_num: 'course_num'
            };

            if (sortTypeMap[data.order] == 'asc' && sortFieldMap[data.prop] == 'sub_type_count' || sortFieldMap[data.prop] == 'type_sort' || sortFieldMap[data.prop] == 'course_num') {
                this.sortTableDate('min', sortFieldMap[data.prop]);
            } else if (sortTypeMap[data.order] == 'desc' && sortFieldMap[data.prop] == 'sub_type_count' || sortFieldMap[data.prop] == 'type_sort' || sortFieldMap[data.prop] == 'course_num') {
                this.sortTableDate('max', sortFieldMap[data.prop]);
            }

            this.getTableData();
        },

        /**
         * 排序函数
         * @param   {String}    param   //max:升序  min:降序
         */
        sortTableDate (param,field) {
            let data = JSON.parse(JSON.stringify(this.tableData));

            if (param == 'max') {
                data.sort((a,b)=>{
                    return a.field - b.field;
                });
                this.tableData = data;
            } else if (param == 'min') {
                data.sort((a,b)=>{
                    return b.field - a.field;
                });
                this.tableData = data;
            } else {
                return;
            }
        },

        /**
         * 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) return '--';
            return val;
        }
    }
};
</script>

<style lang="less" scoped>
    .container {
        background-color: #fff;
        padding: 10px 15px 5px 15px;
        display: flex;
        flex-direction: column;
        position: relative;
        width: 100%;
        .headerBox {
            position: relative;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10px;
            .header-left, .header-right {
                display: flex;
                align-items: center;
                height: 32px;
            }
            .header-box {
                display: flex;
                margin-right: 15px;
                align-items: center;
                color: #606266;
                &-title {
                    margin-right: 2px;
                    white-space: nowrap;
                }
            }
        }
        /* 表单 */
        .scope-price {
            width: 50px;
            height: 50px;
        }
        /* 字体高亮 */
        .cursor-font {
            color: rgb(64, 158, 255);
            cursor: pointer;
        }
        /* 分页 */
        .pagination-wrapper {
            padding-top: 10px;
            .el-pagination {
                float: right;
                padding: 0;
                background-color: transparent;
            }
        }
    }
    /* 排序 */
    .sort-wrap {
        display: flex;
        align-items: center;
        cursor: pointer;
        white-space: nowrap;
        .sort-spliter {
            width: 1px;
            height: 12px;
            background: rgba(235, 235, 235, 1);
            margin: 0 10px;
            }
            .btn-sort {
            font-size: 14px;
            line-height: 1;
            color: #ccc;
            &:hover {
                color: #20a0ff;
            }
        }
    }
    .upload-good-image{
        width: 101px;
        height: 101px;
        display: flex;
        border: 1px dashed #d9d9d9;
        align-items: center;
        justify-content: center;
        font-size: 34px;
        color: #8c939d;
        box-sizing: border-box;
        overflow: hidden;
        cursor: pointer;
        img{
            width: 98px;
            height: 98px;
        }
        .upload-hide {
            width: 100px;
            height: 100px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
    .check-bottom {
        margin-bottom: 20px;
    }
    .categort_transverse {
        width: 400px;
        margin-left: 35px;
    }
    .categort_vertical {
        width: 400px;
        margin-left: 35px;
    }
</style>
<style lang="less">
    .workCategory {
        .el-table__body-wrapper .el-table__body .el-table__row td {
            border-right: none;
        }
        .el-table__header-wrapper .el-table__header .has-gutter tr th {
            border-right: none;
        }
        .el-range-editor--small .el-range-separator{
            padding: 0 1px !important;
        }
        .el-table .el-table_1_column_6  .cell {
            position: relative;
        }
    }
</style>